<template>
  <div>
    <div class="table-main">
      <div class="table-header">
        <span class="title">
          {{ title }}{{ total === 0 ? "" : "（" + total + "）" }}
        </span>
        <div class="action-bar">
          <!-- v-show="isYueku || isOrders" -->
          <el-upload
            v-show="showBtn"
            class="upload-demo"
            :action="isYueku ? '/api/stock-ins/items/excel' : '/api/purchase-items/excel'"
            multiple
            :show-file-list="false"
            :on-success="handleSuccess"
            :on-error="handleError"
          >
            <el-button size="mini" plain>{{isOrders ? '导入' : '入库单明细导入'}}</el-button>
          </el-upload>
          <el-button v-show="showBtn" size="mini" plain @click="handleExport"
            >导出越库明细</el-button
          >
        </div>
        <!-- <div class="action-bar">
          <el-input
            placeholder="请输入货品名称/ID/前端商品id/条形码，请用逗号隔开"
            v-model="searchData"
            size="mini"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div> -->
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        highlight-current-row
        border
        :header-cell-style="{
          color: '#333',
          fontSize: '12px',
          background: '#eee',
          fontWeight:'700'
        }"
      >
        <el-table-column
          v-for="(item, index) in headers"
          :label="item.label"
          :key="index"
          :fixed="item.fixed"
          :width="item.width ? item.width : 'auto'"
        >
          <template slot-scope="scope">
            <template>
              <span v-if="'purchasePrice,amount5'.includes(item.prop)">
                {{scope.row[item.prop] && !isNaN(scope.row[item.prop]) ? parseFloat(scope.row[item.prop]).toFixed(6) : scope.row[item.prop]}}
              </span>
              <span v-else-if="'amount5'.includes(item.prop) && item.label == '未税金额'">
                {{scope.row[item.prop] && !isNaN(scope.row[item.prop]) ? parseFloat(scope.row[item.prop]).toFixed(2) : scope.row[item.prop]}}
              </span>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="状态/审核人" width="120">
          <template slot-scope="scope">
            <span>待供应商确认</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary">详情</el-link>
          </template>
        </el-table-column> -->
      </el-table>
      <template v-if="isPage">
        <Pagination
          :total="total"
          :pageData="page"
          @handlePageChange="handlePageChange"
        ></Pagination>
      </template>
    </div>
  </div>
</template>

<script>
const page = () => {
  return {
    page: 1,
    size: 10
  };
};
export default {
  props: {
    // 接口
    apiUrl: {
      type: String,
      default: "/purchase-items"
    },
    // 表头list
    headers: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // table-cell宽度是否固定
    fixWidth: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: "货品明细"
    },
    // 接口参数
    params: {
      type: Object,
      default: () => {}
    },
    // 是否显示导出越库明细
    isYueku: {
      type: Boolean,
      default: false
    },
    // 是否显示采购单详情导出
    isOrders: {
      type: Boolean,
      default: false
    },
    // 是否显示分页组件
    isPage: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      page: page(),
      total: 0, // 总条数
      tableData: [],
      searchData: ""
    };
  },
  created() {
    this.init();
  },
  computed:{
    showBtn(){
      return this.$store.state.app.showBtn
    }
  },
  methods: {
    handleExport() {
      const params = {
        ...this.page,
        purchaseNo: this.$route.query.purchaseNo,
        page:this.page.page-1
      };
      window.open(
        "http://web.tmall.pingyee.com.cn/" +
          "/stock-ins/items/excel?" +
          this.common.createUrl(params)
      );
    },
    // 分页
    handlePageChange(pages) {
      this.page = pages;
      this.init();
    },
    init() {
      const params = {
        size: this.page.size,
        page: this.page.page <= 0 ? 0 : this.page.page - 1,
        ...this.params
      };
      this.$http(this.apiUrl, params).then(res => {
        if (res && res.records) {
          this.tableData = res.records ? res.records : [];
          this.total = isNaN(res.totalElements) ? 0 : Number(res.totalElements);
        }
        if (res && res.length > 0) {
          this.tableData = res;
          this.total = res.length;
        }
      });
    },
    // 导入后 成功&失败 回调
    handleSuccess(res) {
      this.$message({
        message: "导入成功！",
        type: "success",
        offset: 100
      });
    },
    handleError(err) {
      this.$message({
        message: "导入失败！",
        type: "error",
        offset: 100
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.table-main {
  margin: 12px;
  background-color: #fff;
  font-size: 12px;
  .title {
    font-size: 16px;
  }
  .action-bar {
    display:flex;
    align-items: center;
    height: 100%;
    .upload-demo {
      margin-right: 10px;
    }
  }
  .table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 10px;
  }
}
</style>

<style scoped>
.table-main >>> .el-table__body,
.table-main >>> .el-table__body p {
  font-size: 12px;
}
.table-main >>> .el-table .cell {
  line-height: 14px;
}
.table-main >>> .el-table td,
.table-main >>> .el-table th {
  padding: 8px 0;
}
.table-main >>> .el-input-group__append {
  background-color: #00c900;
}
.table-main >>> .el-icon-search {
  color: #fff;
}
</style>
